<template>
  <div ref="tsRoot">
    <divHeader ref="tsHeader" v-if="$store.state.headers" class="fixed-header"></divHeader>
    <div class="main-content" :class="{ 'with-header': $store.state.headers }">
      <nuxt ref="tsNuxt" />
    </div>
    <divFooter v-if="$store.state.footers"></divFooter>
  </div>
</template>
<script>
import divHeader from "~/components/headers.vue";
import divFooter from "~/components/footers.vue";
export default {
  components: {
    divHeader,
    divFooter,
  },
  created() { },
  data() {
    return {
      observer: null
    };
  },
  mounted() {
    this.setupIntersectionObserver();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    setupIntersectionObserver() {
      this.$nextTick(() => {
        const footerElement = document.querySelector('.footer');

        if (!footerElement) {
          return;
        }

        this.observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
              this.$store.commit('isHeader', false);
            } else {
              this.$store.commit('isHeader', true);
            }
          });
        }, {
          rootMargin: '0px',
          threshold: [0, 0.8, 1]
        });

        this.observer.observe(footerElement);
      });
    }
  },
};
</script>

<style scoped>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.main-content {
  min-height: 100vh;
}
</style>
